<template>
  <div class="kong">
    <el-dialog
      v-model="clockInDetailVisible"
      title="打卡详情展示"
      width="40%"
      :close-on-click-modal="false"
      :before-close="handleClose"
      center
    >
      <el-table :data="tableData" border style="width: 100%" max-height="600">
        <el-table-column
          prop="serialNo"
          label="序号"
          align="center"
          type="index"
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="clockTime"
          label="打卡时间"
          align="center"
          :show-overflow-tooltip="true"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="useageHour"
          label="用时"
          align="center"
          :show-overflow-tooltip="true"
          :formatter="useageHourAdd"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注信息"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, onMounted } from 'vue'
import type { rows, clockDetails } from '../scheduleSetting'
import { getClockInList } from '@/api/clockIn'

const resetFields = () => {
  tableData = ref<clockDetails[]>([])
}

let tableData = ref<clockDetails[]>([])

const clockDetails: clockDetails = reactive({
  id: '',
  scheduleId: '',
  clockTime: '',
  useageHour: 0,
  remark: '',
})

const useageHourAdd = (row: any) => {
  return row.useageHour + 'h'
}

const handleClose = (done: () => void) => {
  changeStatus(false)
  resetFields()
  done()
}

interface Props {
  clockInDetailVisible?: Boolean
}

// 初始化查询
onMounted(() => {})

const query = () => {
  getClockInList(clockDetails.scheduleId).then((res: any) => {
    if (res.code === 0) {
      tableData.value = res.data
    }
  })
}

const myProps = defineProps<Props>()

const { clockInDetailVisible } = toRefs(myProps)

const emit = defineEmits(['getClockInDetailConfig'])

const changeStatus = (status: boolean) => {
  resetFields()
  emit('getClockInDetailConfig', status)
}

const initsObj = (rows: rows) => {
  if (rows) {
    clockDetails.scheduleId = rows.id
    query()
  }
}

defineExpose({
  initsObj,
})
</script>

<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
